<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="form.batch_title" style="width: 180px;" placeholder="批次标题" clearable @keyup.enter.native="searchBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker value-format="yyyy-MM-dd" v-model="form.batch_date" type="date" style="width: 180px" placeholder="批次日期" size="small"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" @click="addBtn" size="small" :loading="btnLoading">新建</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small">
                <el-table-column label="批次标题" align="center" prop="batch_title"></el-table-column>
                <el-table-column label="批次日期" align="center" prop="batch_date"></el-table-column>
                <el-table-column label="批次状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#13ce66" :active-value=1 :inactive-value=0
                                   @change="changStatus(scope.$index, scope.row.status)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="editBtn(row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--编辑-->
        <Modal v-model="batchVisible" :title="batchFrom.id ?'修改批次':'新增批次'" width="500px" :loading="true" :mask-closable="false">
            <el-form label-width="90px" @submit.native.prevent>
                <el-form-item label="批次标题">
                    <el-input v-model.trim="batchFrom.batch_title" placeholder="输入标题" size="small" style="width: 80%" clearable></el-input>
                </el-form-item>
                <el-form-item label="批次日期">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="batchFrom.batch_date" style="width: 80%" type="date" placeholder="选择日期" size="small"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <i-button @click="batchVisible=false;">退 出</i-button>
                <i-button type="primary" :loading="btnLoading" @click="saveBtn">保 存</i-button>
            </div>
        </Modal>
    </section>
</template>

<script>


import {batchList, batchStatus, batchSave} from "@/api/produce/batch";

export default {
    name: "produce_batch",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {batch_title: "", batch_date: ""},
            batchFrom: {batch_title: "", batch_date: ""},
            batchVisible: false,
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            if(this.form.batch_date){
                param.batch_date = this.form.batch_date;
            }
            if(this.form.batch_title){
                param.batch_title = this.form.batch_title;
            }
            this.loading = true;
            batchList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //修改状态
        changStatus(index, value){
            let msg = value ? "启用" : "禁用"
            this.$confirm(msg+"该批次，请确认！！！", '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: value ? 'success' : 'warning'
            }).then(() => {
                let param = {
                    id: this.data[index].id,
                    status: value
                };
                batchStatus(param).then((res) => {
                    if(res.code === 0){
                        this.$message.success(msg+"成功");
                    }else{
                        this.$message.error(res.msg);
                        this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                    }
                }).catch(()=>{
                    this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                });
            }).catch(() => {
                this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                this.$message.info("操作已取消");
            });
        },
        addBtn(){
            this.batchFrom = {batch_date: "", batch_title: ""};
            this.batchVisible = true;
        },
        editBtn(row){
            this.batchFrom = JSON.parse(JSON.stringify(row));
            this.batchVisible = true;
        },
        saveBtn(){
            this.btnLoading = true;
            batchSave(this.batchFrom).then((res) =>{
                this.btnLoading = false;
                if(res.code === 0){
                    this.$message.success("操作成功");
                    this.batchVisible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.btnLoading = false;
            })
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
